<!doctype html>
<html>
<head>
    <title>Hello AngularJS</title>
    <link href="webjars/bootstrap/3.2.0/less/bootstrap.less" rel="stylesheet">
    <link href="webjars/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        [ng\:cloak], [ng-cloak], .ng-cloak {
            display: none !important;
        }
    </style>
</head>

<body ng-app="gateway" ng-controller="navigation as nav" ng-cloak class="ng-cloak">
<div class="navbar navbar-default">
    <div class="container">
        <a class="brand" href="#/">home</a>
        <div class="navbar-right">
            <a href="#/login" class="btn btn-primary">login</a>
            <a href="" class="btn btn-primary" ng-show="nav.authenticated"
               na-click="nav.logout()">logout</a>
            <p ng-show="nav.authenticated">
                Signed in as <a href="#/" class="navbar-link">{{nav.user}}</a>
            </p>
        </div>
    </div>
</div>

<div class="alert alert-danger" ng-show="nav.error">
    there was a problem logging in. please try agagin
</div>

<div class="container" ng-show="!nav.authenticated">
    <form role="form" ng-submit="nav.login()">
        <div class="form-group">
            <label for="username">username:</label>
            <input type="text" name="username" id="username" class="form-control"
                   ng-model="nav.credentials.username">
        </div>
        <div class="form-group">
            <label for="password">password:</label>
            <input class="form-control" type="text" name="password" id="password"
                   ng-model="nav.credentials.password">
        </div>

        <button type="submit" class="btn btn-primary">submit</button>
    </form>
</div>


<div class="container" ng-show="nav.authenticated">
    <a class="btn btn-primary" href="/ui/">Go To User Interface</a>
</div>
<div class="container" ng-show="nav.authenticated && nav.admin">
    <a class="btn btn-primary" href="/admin/">Go To Admin Interface</a>
</div>
<script src="webjars/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="webjars/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script src="webjars/angularjs/1.3.8/angular.min.js" type="text/javascript"></script>
<script src="webjars/angularjs/1.3.8/angular-route.min.js" type="text/javascript"></script>
<script src="webjars/angularjs/1.3.8/angular-cookies.min.js" type="text/javascript"></script>
<script src="js/gateway.js"></script>
</body>
</html>
